import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:osg/controllers/http.dart';

class WebDetail extends StatefulWidget {
  const WebDetail({super.key});

  @override
  State<WebDetail> createState() => _WebDetailState();
}

class _WebDetailState extends State<WebDetail> {
  final uuid = Get.parameters['uuid'];
  final is_box = Get.parameters['is_box'];
  final RxMap productsData = {}.obs;
  RxMap but={}.obs;
  final RxList boxInfo = [].obs;
  final RxInt _index = 0.obs;
 final RxMap indexItem = {}.obs;

  getDetail() {
    Get.find<HTTPS>().getData('/products/$uuid', {}).then((res) {
      if (res != null) {
        productsData.value = res['info'];
        boxInfo.value = res['box_info']; 
        but.value = res['but'];

          if(res['box_info'].isNotEmpty){
             indexItem.value=res['box_info'][0];
          }
      }
    });
  }
 
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      getDetail();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xffffffff),
        ),
        body: Column(
          children: [
            Expanded(
                child: ListView(
              children: [
                Obx(
                  () => Stack(
                    children: [
                      Image.network(is_box == '1'?'${indexItem['thumb']}':'${productsData['thumb']}',
                          errorBuilder: (context, error, stackTrace) {
                        return SizedBox(
                          width: double.infinity,
                        );
                      }),
                      if (is_box == '1')
                        Positioned(
                          top: 20,
                          right: 15,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Container(
                                padding: EdgeInsets.symmetric(horizontal: 10),
                                alignment: Alignment.center,
                                height: 31,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(31),
                                  color: Color.fromARGB(128, 255, 255, 255),
                                ),
                                child: Obx(() => Text(
                                      '发行${indexItem['stock']}份',
                                      style: TextStyle(
                                          color: Color(0XFF000000),
                                          fontSize: 12,
                                          fontWeight: FontWeight.bold),
                                    )),
                              ),
                              SizedBox(
                                width: 10,
                              ),
                              Container(
                                padding: EdgeInsets.symmetric(horizontal: 10),
                                alignment: Alignment.center,
                                height: 31,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(31),
                                  color: Color.fromARGB(128, 255, 255, 255),
                                ),
                                child: Obx(
                                  () => Text(
                                    '概率 ${indexItem['odds']} %',
                                    style: TextStyle(
                                        color: Color(0XFF000000),
                                        fontSize: 12,
                                        fontWeight: FontWeight.bold),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                if (is_box == '1')
                SizedBox(
                  height: 75,
                  child: Obx(() => ListView(
                        scrollDirection: Axis.horizontal,
                        children: [
                          SizedBox(
                            width: 15,
                          ),

                          for (var i=0;i< boxInfo.length;i++)
                            Row(
                              children: [
                                GestureDetector(
                                  onTap: (){
                                    _index.value=i;
                                   indexItem.value=boxInfo[i];
                                  },
                                  child:  
                                   _index.value==i?
                                   Container(
                                    padding: EdgeInsets.all(2),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(5),
                                      border: Border.all(color: Color(0XFF542AFF))
                                    ),
                                    child: ClipRRect(
                                       borderRadius:
                                      BorderRadius.circular(5.0), 
                                      child: Image.network('${boxInfo[i]['thumb']}',height: 70,
                                      width: 70, fit: BoxFit.fill, errorBuilder:
                                          (context, error, stackTrace) {
                                    return SizedBox(
                                      width: 70,
                                    );
                                  }),
                                    )
                                  )
                                  :
                                  Container(
                                    padding: EdgeInsets.all(2),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(5),
                                      border: Border.all(color: Color(0XFFFFFFFF))
                                    ),
                                    child:  ColorFiltered(
                                    colorFilter: const ColorFilter.matrix([
                                      0.2126, 0.7152, 0.0722, 0, 0, // 红色通道权重
                                      0.2126, 0.7152, 0.0722, 0, 0, // 绿色通道权重
                                      0.2126, 0.7152, 0.0722, 0, 0, // 蓝色通道权重
                                      0,      0,      0,      1, 0, // 透明度保持不变
                                    ]),
                                    child: ClipRRect(
                                       borderRadius:
                                      BorderRadius.circular(5.0), 
                                      child: Image.network('${boxInfo[i]['thumb']}',
                                      width: 70, fit: BoxFit.fill, errorBuilder:
                                          (context, error, stackTrace) {
                                    return SizedBox(
                                      width: 70,
                                    );
                                  }),
                                    )
                                    
                                    ,
                                ),
                                  )
                                  
                                 

                                )
                               ,
                                SizedBox(
                                  width: 10,
                                ),
                              ],
                            )
                        ],
                      )),
                ),
               
                Padding(
                    padding: EdgeInsets.symmetric(horizontal: 15),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Obx(() => Text(
                              '限量${productsData['sell_num']}份，流通${productsData['release_num']}份',
                              style: TextStyle(
                                  fontSize: 14, color: Color(0XFF1F0584)),
                            )),
                        Obx(
                          () => Text(
                            '${productsData['title']}',
                            style: TextStyle(
                                fontSize: 18, color: Color(0XFF0F172B)),
                          ),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Row(
                          children: [
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Container(
                                  width: 70,
                                  child:  Text(
                                  '所在产链',
                                  style: TextStyle(
                                      fontSize: 12, color: Color(0XFF999999)),
                                ),
                                ),
                                Obx(() => Text(
                                      '${productsData['link_name']}',
                                      style: TextStyle(
                                          fontSize: 14,
                                          color: Color(0XFF0F172B)),
                                    )),
                              ],
                            ),
                            SizedBox(
                              width: 100,
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  '发售时间',
                                  style: TextStyle(
                                      fontSize: 12, color: Color(0XFF999999)),
                                ),
                                Obx(() => 
                                    productsData.isNotEmpty?
                                  Text(
                                      '${productsData['created_at'].split(' ')[0]}',
                                      style: TextStyle(
                                          fontSize: 14,
                                          color: Color(0XFF0F172B)),
                                    ):Text('')
                                    ),
                              ],
                            ),
                          ],
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        Row(
                          children: [
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Container(
                                  width: 70,
                                  child: Text(
                                  '合约地址',
                                  style: TextStyle(
                                      fontSize: 12, color: Color(0XFF999999)),
                                ),
                                ),
                                Obx(() => productsData.isNotEmpty &&
                                        productsData['link_address'].isNotEmpty
                                    ? Text(
                                        '${productsData['link_address'].substring(0, 3)}...${productsData['link_address'].substring(14, 18)}',
                                        style: TextStyle(
                                            fontSize: 14,
                                            color: Color(0XFF0F172B)),
                                      )
                                    : Text('...'))
                              ],
                            ),
                            SizedBox(
                              width: 100,
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  '支付方式',
                                  style: TextStyle(
                                      fontSize: 12, color: Color(0XFF999999)),
                                ),
                                Obx(() => Text(
                                      '${productsData['pay_type']}',
                                      style: TextStyle(
                                          fontSize: 14,
                                          color: Color(0XFF0F172B)),
                                    )),
                              ],
                            ),
                          ],
                        ),
                        Divider(
                          color: Color(0XFFDDDDDD),
                          height: 30,
                        ),
                        Text(
                          '藏品简介',
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Obx(() => Column(
                              children: [
                                if (productsData.isNotEmpty)
                                  for (var item in productsData['images'])
                                    Image.network(item)
                              ],
                            )),
                        SizedBox(
                          height: 10,
                        ),
                        Text(
                          '购买须知',
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                        SizedBox(
                          height: 5,
                        ),
                        Text(
                          '数字藏品交易仅限于18周岁(不含)以上、60周岁(含)以下，并已完成实名认证的中国大陆用户购买。由于不同属性的数字艺术有不同的二次交易规则，请您仔细阅读并同意相关规则后再进行相应操作，以避免不必要的损失。 请注意，一旦数字藏品完成出售，不支持退货在购买之前，请仔细考虑您的购买决策。根据我国相关的法律要求，特定条件下的数字藏品的二次交易不支持任何形式的变相炒作。我们坚决反对数字藏品炒作、场外交易、欺诈，以及其他非法侵权行为。请您甄别上述涉嫌网络欺诈的行为并了解相关风险。',
                          style:
                              TextStyle(fontSize: 12, color: Color(0XFF999999)),
                        ),
                        SizedBox(
                          height: 15,
                        ),
                      ],
                    )),
              ],
            )),

// Expanded(child: SizedBox()),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
              height: 60,
              decoration: BoxDecoration(
                  color: Color(0XFF0F172B),
                  borderRadius: BorderRadius.circular(60)),
              child: Row(
                children: [
                  SizedBox(
                    width: 20,
                  ),
                  Text(
                    '￥',
                    style: TextStyle(fontSize: 16, color: Color(0XFFFFFFFF)),
                  ),
                  Obx(() => Text(
                        productsData.isNotEmpty
                            ? '${productsData['money_price'] / 100}'
                            : '',
                        style:
                            TextStyle(fontSize: 24, color: Color(0XFFFFFFFF)),
                      )),
                  Expanded(child: SizedBox()),
                  GestureDetector(
                    onTap: () {
                      if(but['buy']){
                        Get.toNamed('/web_tabs/details/settlement?thumb=${productsData['thumb']}&is_box=$is_box&money_price=${productsData['money_price']/100}&uuid=${productsData['uuid']}&title=${productsData['title']}');
                      }
                      },
                    child: 
                    Obx(()=>
                    Text('${but['but']}',
                      style: TextStyle(fontSize: 18, color: Color(0XFFFFFFFF)),
                    )
                    )
                    ,
                  ),
                  SizedBox(
                    width: 20,
                  ),
                ],
              ),
            )
          ],
        )

        // Column(
        //   children: [
        //     Expanded(
        //         child: ListView(
        //       children: [Image.asset('static/aaa.png')],
        //     )),
        //   ],
        // ),

        );
  }
}
